<template>
	<view class="voucherCenterContainer ">
		<view class="blockBackground flex-between">
			<view class="">
				<view class="balance">
					{{balance}}
				</view>
				<view style="color: rgb(148, 148, 148);">
					<text>余额账户（元）</text>
				</view>
			</view>
			<view class="accountDetail flex" @click="accountDetailFn">
				账户明细
			</view>
		</view>
		<!-- 在线充值 -->
		<view class="onlineRecharge">
			<view style="color: rgb(0, 0, 0);font-size: 32rpx;font-weight: 600;">
				在线充值
			</view>

			<view class="rechargePrice flex-start-center-wrap">
				<block v-for="(item,index) in onlineRechargeList" :key="index">

					<view @click="switchRechargePrice(index,item)"
						:class="['flex-column',currentIndex == index?'container':'container-noActive']">
						<view class="preferential flex" v-if="!(item.give_amount=='0.00')">

							{{'送'+totelName(item.give_amount)+'元'}}
						</view>
						<view :class="[currentIndex == index?'price':'price-noActive']">
							<text>￥</text>
							{{totelName(item.amount)}}
						</view>
						<view style="color: rgb(153, 153, 153);">
							<text>{{'到账'+totelName(Number(item.amount)+Number(item.give_amount))+'元'}}</text>
						</view>
					</view>

				</block>
			</view>
			<!-- 其他金额 -->

			<view class="otherMoney flex">
				<view style="width: 80px">
					其他余额
				</view>

				<input @focus="focusInput()" class="font-overflow" v-model="money" placeholder="请输入充值余额" />

			</view>

			<view class="paymentMethod flex-column-between">

				<view class="flex-between">

					<view class="flex">
						<image class="balance" src="../../static/会员卡yi/组合 490.png" mode=""></image>
						<view class="flex-column-between-start " style="height: 90rpx;">
							<text style="color: rgb(0, 0, 0);font-size: 32rpx;">微信</text>
							<text style="color: rgb(153, 153, 153);">当前选择余额充值</text>
						</view>
					</view>
					<view class="">
						<uni-data-checkbox v-model="radio1" :localdata="sex"></uni-data-checkbox>
					</view>
				</view>
			</view>
			<!-- 立即充值余额 -->
			<view class="rechargeBalance flex" @click="immediatelyRecharge()">
				立即充值余额
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				money: '',
				radio1: 0,
				sex: [{
					text: '',
					value: 0
				}],
				currentIndex: 0,
				balance: null,
				isSuccess:true,
				token: uni.getStorageSync('login').token,
				onlineRechargeList: [{
						actualMoney: 26,
						finalMoney: 30,
						discountMoney: 160
					},
					{
						actualMoney: 26,
						finalMoney: 30,
						discountMoney: 160
					},
					{
						actualMoney: 26,
						finalMoney: 30,
						discountMoney: 160
					},
					{
						actualMoney: 26,
						finalMoney: 30,
						discountMoney: ''
					}
				]
			}
		},
		onLoad() {
			this.init()
		},
		computed: {
		totelName: function() {
			return function(num) {
		
				if (num >= 10000) {
					let remainder = num % 10000;
					let quotient = Math.floor(num / 10000);
					let decimal = Math.floor(remainder / 1000);
					return quotient + '.' + decimal + '万';
				} else {
					
						var numberStr = num.toString();
						 return numberStr.replace(/(\.0+|0+)$/, '');
						 // num.toString();
						
					
				}
			};
		}
		},
		onShow() {
			this.$at.releaseKey('submit');
		},
		methods: {
			accountDetailFn() {
				this.$sun.navGo('/pages/revenueRecords/revenueRecords')
			},
			switchRechargePrice(index, item) {
				this.money = ''
				this.amount =  Number(item.amount)
				this.currentIndex = index
			},
			async immediatelyRecharge() {

				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
                        if(this.money || this.amount){
							console.log(this.amount, this.money)
							// 充值成功
							const res = await this.$http.post({
								url: this.$api.rechargeOrder,
								data: {
							
									amount: Number(this.money) ? Number(this.money) : this.amount
							
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}
							
							})
							
							if (res.code == 0) {
							
							
							
								
								
								// this.$sun.toast(res.msg, 'none')
								
								let pay =res.data
								this.$at.releaseKey('submit');
								await this.$wx.config({
									debug: false,
									appId: pay.appid,
									timestamp: pay.timeStamp,
									nonceStr: pay.nonceStr,
									paySign: pay.paySign,
									jsApiList: ['chooseWXPay']
								});
								await this.$wx.chooseWXPay({
									timestamp: pay.timeStamp,
									nonceStr: pay.nonceStr,
									package: pay.package,
									signType: pay.signType,
									paySign: pay.paySign,
									appId: pay.appId,
									
									success: async res => {
										this.isSuccess = true;
										// this.$sun.toast('进入支付成功111');
										
										// this.$sun.navRe('/pages/user/order/order', {
										// 	id: 1
										// });
										// 后台修改状态，则不需要重复调用接口
										// this.wxOrder();
									},
									fail: async err => {
										this.$sun.toast('取消了支付');
										this.$at.releaseKey('submit');
										
									},
									complete: async res => {
										if (this.isSuccess == true) {
											console.log('进入支付成功回调===========', res);
								            this.init()
											// this.$sun.toast('进入支付成功回调'+res);
										} else {
											this.$sun.toast('取消了支付');
											this.$at.releaseKey('submit');
											
										}
										console.log('进入测试回调===========', res);
									}
								});
							
							
							} else {
							
								this.$sun.toast(res.msg, 'none')
								this.$at.releaseKey('submit');
							}
						}else{
							this.$sun.toast('请选择金额或者输入金额', 'none')
							this.$at.releaseKey('submit');
						}
					


					}
				});


			},
			focusInput() {
				console.log('1231')
				// 在线充值列表失去焦点
				this.currentIndex = 200
				this.amount = ''
			},
			async init() {
				// 获取充值列表
				const res = await this.$http.post({
					url: this.$api.payAmount,
					data: {



					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (res.code == 0) {



					console.log(res.data)
					if (res.data.list.length) {
						this.onlineRechargeList = res.data.list
						this.amount = Number(res.data.list[0].amount) 
					}else{
						this.onlineRechargeList = res.data.list
					}

				} else {

					this.$sun.toast(res.msg, 'none')
				}
				// 获取用户信息
				const resUser = await this.$http.post({
					url: this.$api.userinfo,
					data: {

                     id: uni.getStorageSync('userId'),

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resUser.code == 0) {



					console.log(resUser.data)
					this.balance = resUser.data.balance


				} else {

					this.$sun.toast(this.onlineRechargeList = res.data.list.msg, 'none')
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #fff;
	}

	.voucherCenterContainer {
		.blockBackground {
			background: rgb(53, 55, 71);
			width: 750rpx;
			height: 165.32rpx;
			padding: 40rpx;

			.balance {
				color: rgb(250, 250, 250);

				font-size: 40rpx;
				font-weight: 700;
			}

			.accountDetail {
				border-radius: 200rpx;
				background: rgb(244, 212, 163);
				width: 154.16rpx;
				height: 54.76rpx;
				color: rgb(122, 85, 32);
				font-weight: 500;
				font-size: 24rpx;
			}
		}

		.onlineRecharge {
			padding: 40rpx;

			.rechargePrice {
				margin-top: 40rpx;

				.container {

					margin: 0 30rpx 28rpx 0;

					width: 200rpx;
					height: 193.2rpx;
					box-sizing: border-box;
					border: 1px solid rgb(244, 212, 163);
					border-radius: 10px;

					background: rgba(244, 212, 163, 0.5);

					.preferential {
						align-self: flex-end;
						border-radius: 20rpx 20rpx 0rpx 20rpx;
						color: rgb(255, 255, 255);

						font-size: 20rpx;
						font-weight: 400;
						background: rgb(255, 0, 0);
						width: 114rpx;
						height: 40rpx;
						margin-top: -45rpx;
					}
				}

				.container:nth-child(3n) {
					margin-right: 0;
				}

				.container-noActive {

					margin: 0 30rpx 28rpx 0;

					width: 200rpx;
					height: 193.2rpx;
					box-sizing: border-box;
					border: 1px solid rgb(234, 234, 234);
					border-radius: 10px;

					background: rgb(248, 248, 248);

					.preferential {
						align-self: flex-end;
						border-radius: 20rpx 20rpx 0rpx 20rpx;
						color: rgb(255, 255, 255);

						font-size: 20rpx;
						font-weight: 400;
						background: rgb(255, 0, 0);
						width: 114rpx;
						height: 40rpx;
						margin-top: -45rpx;
					}
				}

				.container-noActive:nth-child(3n) {
					margin-right: 0;
				}

				.price {
					color: rgb(122, 85, 32);

					font-size: 50rpx;
					font-weight: 700;
				}

				.price-noActive {
					color: rgb(56, 56, 56);

					font-size: 50rpx;
					font-weight: 700;
				}
			}

			.otherMoney {
				margin-top: 60rpx;
				width: 666.4rpx;
				height: 88.42rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border: 1px solid rgb(223, 223, 223);
				border-radius: 5px;

			}

			.paymentMethod {
				margin-top: 20rpx;
				padding: 56rpx 56rpx 36rpx 0;
				width: 730rpx;
				height: 228rpx;
				border-radius: 10px;

				background: rgb(255, 255, 255);

				.balance {
					width: 50rpx;
					height: 50rpx;
					margin-right: 30rpx;
				}

				.boder {
					width: 657rpx;
					height: 0;
					border: 1rpx solid rgb(245, 245, 245);
				}

				/deep/ .checklist-box {
					margin-right: 0;
				}
			}

			.rechargeBalance {

				height: 96rpx;
				border-radius: 90rpx;

				background: linear-gradient(83.09deg, rgb(242, 208, 147) 0.129%, rgb(254, 231, 185) 98.512%);
			}
		}

	}
</style>